<template>
  <div class="index">
    <a-spin tip="loading..." :spinning="spinning">
      <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <a-layout-header class="header">
          <div class="header-box">
            <div v-if="isPC">影沐管理系统</div>
            <div v-else>影沐</div>
            <a-menu
              v-if="!isPC"
              theme="dark"
              mode="horizontal"
              @select="handleSelectNav"
              :selectedKeys="activeHeaderMenu"
            >
              <template v-for="item in navList">
                <a-menu-item v-if="!item.children" :key="item.name">
                  <a-icon :type="item.meta.icon" />
                </a-menu-item>
                <sub-menu-mobile v-else :menu-info="item" :key="item.name" />
              </template>
            </a-menu>
            <div>
              <a-dropdown>
                <a class="ant-dropdown-link" href="#"
                  ><a-avatar
                    :src="$api.picPre + userInfo.avatar"
                    icon="user"
                    style="margin-right: 10px"/><span>{{
                    userInfo.trueName
                  }}</span>
                  <a-icon type="down"
                /></a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">
                    <div class="info-wrapper">
                      <a-avatar
                        :size="54"
                        :src="$api.picPre + userInfo.avatar"
                        icon="user"
                        style="margin: 0 0 10px 0"
                      /><br />
                      <span style="font-weight: bold">{{
                        userInfo.trueName
                      }}</span>
                      <div class="info-item">
                        <span>账号：</span>
                        <span>{{ userInfo.userName }}</span>
                      </div>
                      <div class="info-item">
                        <span>手机号码：</span>
                        <span>{{ userInfo.mobile }}</span>
                      </div>
                      <a-button type="primary" @click="visible = true"
                        >编辑个人信息</a-button
                      >
                      <a-divider type="vertical" />
                      <a-button @click="logout" type="danger"
                        >退出登录</a-button
                      >
                    </div>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </a-layout-header>
        <a-layout v-if="isPC">
          <a-layout-sider collapsible v-model="collapsed">
            <a-menu
              theme="dark"
              mode="inline"
              @select="handleSelectNav"
              :selectedKeys="activeHeaderMenu"
              :openKeys="openKeys"
              @openChange="onOpenChange"
            >
              <template v-for="item in navList">
                <a-menu-item v-if="!item.children" :key="item.name">
                  <a-icon :type="item.meta.icon" />
                  <span>{{ item.meta.name }}</span>
                </a-menu-item>
                <sub-menu v-else :menu-info="item" :key="item.name" />
              </template>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 16px">
            <a-breadcrumb style="margin-bottom: 16px">
              <a-breadcrumb-item
                v-for="(item, index) in breadcrumbList"
                :key="index"
              >
                <a
                  href="javascript:void(0);"
                  @click="goPage(item.router, index)"
                  >{{ item.name }}</a
                ></a-breadcrumb-item
              >
            </a-breadcrumb>
            <a-layout-content>
              <div class="content">
                <router-view />
              </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
        <a-layout-content v-else>
          <div class="content">
            <router-view />
          </div>
        </a-layout-content>
      </a-layout>
    </a-spin>
    <add-modal
      :editInfo="userInfo"
      :visible="visible"
      :editBoxState="editBoxState"
      @handleCancel="handleCancel"
    ></add-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  components: {
    addModal: () => import("@/views/index/add"),
    subMenu: () => import("@/components/subMenu/index"),
    subMenuMobile: () => import("@/components/subMenu/mobile")
  },
  data() {
    return {
      collapsed: false,
      rootSubmenuKeys: [],
      visible: false,
      editBoxState: 1
    };
  },
  methods: {
    handleCancel(isFresh) {
      if (isFresh) {
        this.getInfo();
      }
      this.visible = false;
    },
    handleSelectNav(item) {
      if (item.key === "home") {
        this.$store.dispatch("changeOpenKey", []);
      }
      this.goPage(item.key);
    },
    goPage(routerName, index) {
      //  处理面包屑
      if (index) {
        if (this.breadcrumbList.length >= 3 && index === 2) {
          this.$router.push({ name: routerName });
        } else {
          return false;
        }
      } else {
        this.$router.push({ name: routerName });
      }
    },
    logout() {
      this.$ajax
        .post(this.$api.logout)
        .then(() => {
          localStorage.removeItem("token");
          sessionStorage.clear();
          this.$router.push({ name: "adminLogin" });
          this.$store.dispatch("changeLoginState", false);
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.allSubMenuKeyList.indexOf(latestOpenKey) === -1) {
        this.$store.dispatch("changeOpenKey", openKeys);
      } else {
        let openkey = latestOpenKey ? [latestOpenKey] : [];
        this.$store.dispatch("changeOpenKey", openkey);
      }
    }
  },
  asyncComputed: {
    async navList() {
      return await this.$store.getters.getNavList;
    }
  },
  computed: {
    ...mapState({
      athList: "athList",
      userInfo: "userInfo",
      routerName: "currentRouterName",
      activeHeaderMenu: "activeHeaderMenu",
      breadcrumbList: "currentBreadcrumb",
      allSubMenuKeyList: "allSubMenuKeyList",
      openKeys: "openKey",
      spinning: "spinning",
      isPC: "isPC"
    })
  },
  created() {
    if (!this.isPC) {
      this.collapsed = true;
    }
    this.goPage(this.routerName);
    this.$commonJs.getAthList();
  }
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 100%;
}

.ant-layout {
  height: 100%;
  /*::-webkit-scrollbar {*/
  /*  width: 0 !important;*/
  /*}*/
}
#components-layout-demo-side .header-box {
  color: @white;
  .flex_content();
  .flex_justify_space();
  span {
    font-size: 16px;
  }
  .logout {
    color: red;
    cursor: pointer;
  }
}
.info-wrapper {
  padding: 16px;
  text-align: center;
}
.info-item {
  .flex_content();
  .flex_justify_space();
  padding: 5px 0;
}
.ant-menu {
  height: calc(100% - 60px);
  overflow: auto;
  @media screen and (max-width: 769px) {
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
}
.content {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  @media (max-width: 1440px) {
    height: 646px;
  }
}
</style>
